<template>
  <div>
      <div class="film-list">
          <ul class="movieinfo" v-infinite-scroll="loadMore"
                                infinite-scroll-disabled="loading"
                                infinite-scroll-distance="10">
              <li v-for="item in list " :key="item.filmId" @click="go(item.filmId)">
                  <a href="javascript:;" class="ab" v-if="type===1">
                      <div class="movie-img">
                          <img :src="item.poster" alt="">
                      </div>
                      <div class="film-info">
                          <div class="nowplay-name">
                              <span class="name">{{item.name}}</span>
                              <span class="item">{{item.item.name}}</span>
                          </div>
                          <div class="nowplay-grade">
                              <span class="label">观众评分</span>
                              <span class="grade">{{item.grade}}</span>
                          </div>
                          <div class="actorlist">
                              <span>主演:</span>
                              <span v-for="it in item.actors" :key="it.name">{{it.name}}</span>
                          </div>
                          <div class="actorlist">
                              <span class="label">{{item.nation}}|{{item.runtime}}</span>
                          </div>
                      </div>
                      <div class="buy-btn" v-if="item.isPresale">
                          购票
                      </div>
                  </a>
                  <a href="javascript:;" class="ab" v-if="type ===2">
                      <div class="movie-img">
                          <img :src="item.poster" alt="">
                      </div>
                      <div class="film-info">
                          <div class="nowplay-name">
                              <span class="name">{{item.name}}</span>
                              <span class="item">{{item.item.name}}</span>
                          </div>
                          <div class="nowplay-grade">
                              <span class="label"></span>
                              <span class="grade"></span>
                          </div>
                          <div class="actorlist">
                              <span>主演:</span>
                              <span v-for="(it,index) in item.actors" :key="index">{{it.name}}</span>
                          </div>
                          <div class="actorlist">
                              <span class="label">上映时间：{{'周' + new Date(parseInt(item.premiereAt) * 1000).getDay()}}&nbsp;{{new Date(parseInt(item.premiereAt) * 1000).toLocaleString().slice(5, 9).replace('/', '月') + '日'}} </span>
                          </div>
                      </div>
                      <div class="buy-btn" v-if="item.isPresale">
                          预售
                      </div>
                  </a>
              </li>
          </ul>
      </div>
  </div>
</template>

<script>
import {getMovieList} from '@/api'
import { Toast } from 'mint-ui';
export default {
  data() {
    return {
      list:[],
      loading:false,
      type:'',
      page:1,
      total:1

    }
  },
  watch: {
    $route:{
      handler(n,o){
        this.resetlist();
        var p=n.params.type;
        if(!p){
          this.$router.push("/film/nowmv")
        }
        this.type = p==="nowmv"?1:2;
        this.getdata(this.type,this.page)
      },
      deep:true,
      immediate:true,
    }
  },
  methods: {
    loadMore(){
      this.page++;
      this.getdata(this.type,this.page);
    },
    getdata(type,page){
      if(this.list.length>=this.total){
        Toast({
          message:'没有更多数据啦',
          duration:1500
        })
        return;
      }
      this.loading=true;
      getMovieList(type,page).then(res=>{
      this.list =this.list.concat(res.data.data.films)
      this.total = res.data.data.total;
      this.loading = false;
    })
    },
    resetlist(){
      this.page = 1;
      this.loading = false;
      this.list=[]
    },
    go(id){
        this.$router.push('/detail/'+id)
    },
  },
}
</script>

<style lang="scss" scoped>
    .film-list{
        background: #fff;
        position: relative;
        margin-bottom: 1rem;
         ul {
            list-style: none;
            padding: 0;
            margin-left: 15px;
            margin-bottom: 0;
            margin-top: 0;
             li {
                // padding: 15px 15px 15px 0;
                height: 94px;
                position: relative;
                margin-top: 10px;
                .ab{
                    display: flex;
                    justify-content: flex-start;
                    align-items: center;
                    .movie-img{
                            width: 66px;
                            height: 94px;
                            background: rgb(249, 249, 249);
                            opacity: 1;
                            display: block;
                            position: relative;
                            overflow: hidden;
                            top: 0;
                            img{
                                width: 100%;
                                position: absolute;
                            }
                        }
                        .film-info{
                            width: calc(100% - 116px);
                            padding: 0 10px;
                            float: left;
                            .nowplay-name{
                                overflow: hidden;
                                text-overflow: ellipsis;
                                white-space: nowrap;
                                width: 100%;
                                span{
                                    display: inline-block;
                                    vertical-align: middle;
                                }
                                .name {
                                    max-width: calc(100% - 25px);
                                    color: #191a1b;
                                    font-size: 16px;
                                    height: 22px;
                                    line-height: 22px;
                                    margin-right: 5px;
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    }
                                    .item {
                                        font-size: 9px;
                                        color: #fff;
                                        background-color: #d2d6dc;
                                        height: 14px;
                                        line-height: 14px;
                                        padding: 0 2px;
                                        border-radius: 2px;
                                    }
                                }
                                .nowplay-grade{
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    width: 100%;
                                    visibility: visible;
                                    .label {
                                        font-size: 13px;
                                        margin-top: 4px;
                                        color: #797d82;
                                    }
                                    .grade {
                                        color: #ffb232;
                                        font-size: 14px;
                                    }
                                }
                                .actorlist{
                                    overflow: hidden;
                                    text-overflow: ellipsis;
                                    white-space: nowrap;
                                    width: 100%;
                                    span{
                                        font-size: 13px;
                                        margin-top: 4px;
                                        color: #797d82;
                                    }
                                }
                            }
                            .buy-btn{
                                line-height: 25px;
                                height: 25px;
                                width: 50px;
                                color: #ff5f16;
                                font-size: 13px;
                                text-align: center;
                                border-radius: 2px;
                                position: relative;
                                float: right;
                                margin-right: 10px;
                            }
                            .buy-btn:after{
                                content: " ";
                                transform: scale(.5);
                                position: absolute;
                                border: 1px solid #ff5f16;
                                top: -50%;
                                right: -50%;
                                bottom: -50%;
                                left: -50%;
                                border-radius: 4px;
                            }
                        }
                    }
                }
            }
</style>